<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style>
        a { color: #666; }
        /* 动态伪类选择器 */
        a:link { color: #666; }
        a:visited { color: #f00; }
        a:hover { color: #000; }
        a:active { color: #0f0; }

        /* UI 元素状态伪类选择器 */
        input:disabled { background-color: #eee; }
        input:enabled { background-color: #0f0; }

        /* 结构伪类选择器 */
        .demo { border: 1px solid #ccc; width: 500px; margin: 50px auto; }
        .demo li { float: left; list-style: none; padding: 2px; margin-right: 4px;width: 20px;}
        .demo li a { display: block; width: 20px; height: 20px; text-align: center; border-radius: 10px; background-color: #ccc; line-height: 20px; text-decoration: none; }
        .clearfix { clear: both; overflow: auto; }

        .demo li:first-child { background-color: #0f0; }
        .demo li:last-child { background-color: #0f0; }
        .demo li:nth-child(3) { background-color: #333; } 
        .demo li:nth-child(even) { background-color: #f00; } 
    </style>
</head>
<body>
    <a href="#">伪类选择器</a>
    <hr>
    <input> <br>
    <input disabled>
    <hr>
    <div class="demo clearfix">
        <ul class="clearfix">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
        </ul>
    </div>
</body>
</html>